<template>
  <view class="tree-item">
    <!-- 当前节点 -->
    <view 
      class="tree-node" 
      :style="{ paddingLeft: (level * 36) + 'rpx' }"
      
    >
      <view class="node-content">
        <!-- 展开/收起图标 -->
        <!-- 节点文本 -->
        <text class="node-text" @tap.stop="jump(nodeData)" :class="`tree-node-level-${level}`">{{ nodeData.name }}</text>
		<text v-if="hasChildren" class='fu-iconfont2  list_fd1_0_c0_c1_c1_c0_ibhf' @tap.stop="add(1,nodeData)">&#xe7b6;</text>
		<image @click="toggle" v-if="hasChildren" class="arrow" :class="{ expanded: isExpanded }" :src='isExpanded?STATIC_URL+"up.png":STATIC_URL+"down.png"' mode="" ></image>
      </view>
    </view>
    
    <!-- 子节点 -->
    <view 
      v-show="isExpanded && hasChildren" 
      class="children-container"
    >
      <tree-item
        v-for="child in nodeData.children"
        :key="child.aid || child.name"
        :nodeData="child"
        :level="level + 1"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'tree-item',
  props: {
    nodeData: {
      type: Object,
      required: true
    },
    level: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isExpanded: this.level < 0 // 默认展开前两级
    }
  },
  computed: {
    hasChildren() {
      return this.nodeData.children && this.nodeData.children.length > 0
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isExpanded = !this.isExpanded
      } else {
        // 没有子节点，点击后执行其他操作（如跳转题目）
        this.$emit('itemClick', this.nodeData)
      }
    },
	jump(item){
		let aidList = item.aid
		this.$urouter.navigateTo(
			`/pages/kc/zjzy/zjzy?aidList=${aidList}&name=${item.name}`
		);
	}
  }
}
</script>

<style scoped>
.tree-item {
  width: 100%;
}

.tree-node {
  padding: 25rpx 30rpx;
  /* border-bottom: 1rpx solid #f0f0f0; */
  background: white;
}

.tree-node:active {
  background-color: #f8f9fa;
}

.node-content {
  display: flex;
  align-items: center;
}

.arrow {
  width: 22rpx;
  height: 22rpx;
  margin-right: 15rpx;
  font-size: 24rpx;
  color: #666;
  transition: transform 0.3s ease;
}

.arrow.expanded {
  transform: rotate(0deg);
}

.arrow-placeholder {
  width: 30rpx;
  margin-right: 15rpx;
  color: #999;
  font-size: 20rpx;
  text-align: center;
}

.node-text {
  flex: 1;
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 40rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;	
}
.tree-node-level-0{
	/* width: 322px;
	height: 45px; */
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 45rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}


.question-count {
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  padding: 6rpx 12rpx;
  border-radius: 20rpx;
  margin-left: 15rpx;
}

.children-container {
  background: #fafafa;
}
.image {
		width: 26rpx;
		height: 26rpx;
		// margin-top: 10rpx;
		margin-left: 16rpx;
	}
	.list_fd1_0_c0_c1_c1_c0_ibhf {
				margin: 0rpx 32rpx 0rpx 0rpx;
				color: rgba(40, 96, 244, 1);
			}
</style>